<template>
  <div class="service-card card" :class="{'animate': animated}">
    <div class="card-body">
      <div class="service-icon">
        <i :class="'fas fa-' + service.icon"></i>
      </div>
      <h3 class="service-title">{{ service.title }}</h3>
      <p class="service-description">
        {{ service.description }}
      </p>
      <router-link :to="service.link" class="learn-more">
        {{ service.linkText }}
        <i class="fas fa-arrow-right"></i>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

interface Service {
  id: number
  icon: string
  title: string
  description: string
  link: string
  linkText: string
}

const props = defineProps<{
  service: Service
  delay?: number
}>()

const animated = ref(false)
const target = ref<HTMLElement | null>(null)

// 延迟动画
const delay = props.delay || 0

// 使用交叉观察器实现滚动动画
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      setTimeout(() => {
        animated.value = true
      }, delay * 1000)
      stop()
    }
  },
  { threshold: 0.15 }
)
</script>

<style scoped lang="scss">
.service-card {
  height: 100%;
  
  .service-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--primary-blue);
    margin-bottom: 20px;
    transition: var(--transition);
  }
  
  &:hover .service-icon {
    background: var(--primary-blue);
    color: var(--white);
  }
  
  .service-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-dark);
  }
  
  .service-description {
    margin-bottom: 20px;
    color: var(--text-medium);
  }
  
  .learn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-blue);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    
    &:hover {
      gap: 12px;
    }
  }
}
</style>
